<template>
    <div class="app-container">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="user.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="user.name"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="user.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="user.password2" type="password"></el-input>
            </el-form-item>
            <el-form-item label="城市">
                <el-input v-model="user.city"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <image-upload :imgPath="user.avatar" @success="imgUploadSuccess"></image-upload>
            </el-form-item>
            <el-form-item label="角色配置">
                <el-button size="mini" round @click="selectRoleTableVisible=true">选择角色</el-button>
                <el-tag class="role-tag"
                    v-for="roleId in user.roleIdList"
                    :key="roleId"
                    closable
                    @close="removeRole(roleId)"
                    type="info">
                    {{rolesMap[roleId].name}}
                </el-tag>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                    v-model="user.birth"
                    type="date"
                    placeholder="生日">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="user.zlassId" filterable placeholder="请选择">
                    <el-option
                        v-for="zlass in zlasses"
                        :key="zlass.id"
                        :label="zlass.name"
                        :value="zlass.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账号类型">
                <el-radio-group v-model="user.type">
                    <el-radio  label="1">管理用户</el-radio>
                    <el-radio  label="0">普通用户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户状态">
                <el-radio-group v-model="user.status">
                    <el-radio  label="0">未验证</el-radio>
                    <el-radio  label="1">已验证</el-radio>
                </el-radio-group>
            </el-form-item>


            <el-form-item label="性别">
                <el-radio-group v-model="user.gender">
                    <el-radio  label="1">男</el-radio>
                    <el-radio  label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="edit()">编辑</el-button>
                <el-button @click="toBack()">返回</el-button>
            </el-form-item>
        </el-form>



        <!--选择角色的模态框-->
        <el-dialog title="选择角色" :visible.sync="selectRoleTableVisible">
            <table class="z-table" style="width: 100%">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>角色</th>
                    <th>备注</th>
                    <th>选择</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(v,k) in rolesMap" :key="v.id">
                    <td>{{v.id}}</td>
                    <td>{{v.name}}</td>
                    <td>{{v.remark}}</td>
                    <td>
                        <el-switch v-model="rolesMap[k].selected" @change="selectRole(k)"></el-switch>
                    </td>
                </tr>
                <tr v-if="rolesMap.size == 0">
                    <td class="null-tr" colspan="6">空</td>
                </tr>
                </tbody>
            </table>
        </el-dialog>
    </div>

</template>

<script>
    import '@/styles/form-box.css'
    import zlassApi from '../../api/zlass'
    import roleApi from '../../api/role'
    import userApi from '../../api/user'
    import {Message} from 'element-ui'

    import ImageUpload from '../../components/FileUpload/imageUpload'

    export default {
        name: "user-manager-add",
        props:['username'],
        data:function () {
            return {
                user:{
                    name:'',
                    username:'',
                    password:'',
                    password2:'',
                    zlassId:null,
                    birth:new Date("1996-10-04"),
                    gender:'1',
                    status:'0',
                    city:'',
                    type:'1',
                    avatar:'',
                    roleIdList:[],
                },
                zlasses:[],
                rolesMap:{},
                selectRoleTableVisible:false
            }
        },
        methods:{
            imgUploadSuccess:function(path){
                console.log(path)
                this.user.avatar = path;
            },
            toBack:function () {
                this.$router.back(-1)
            },
            edit:function () {
                const _this = this;
                //输入内容是否合法
                if (_this.user.password.length != 0 && _this.user.password.length < 8){
                    Message.error('密码长度必须大于8')
                    return ;
                }
                if (_this.user.password.length != 0 && _this.user.password != _this.user.password2){
                    Message.error('两次密码输入不同')
                    return ;
                }
                //编辑用户
                userApi.edit(_this.user)
                    .then(function (data) {
                        if (data.success){
                            Message.success('编辑用户成功')
                            return
                        }
                        Message.error('编辑用户失败')
                    }).catch(function () {
                        Message.error('编辑用户失败')
                    })
            },
            addRole:function (roleId) {
                var index = this.user.roleIdList.indexOf(roleId)
                if (index <= -1){
                    this.user.roleIdList.push(roleId)
                    this.rolesMap[roleId.toString()].selected = true;
                }
            },
            removeRole:function(roleId){
                var index = this.user.roleIdList.indexOf(roleId.toString())
                if (index > -1){
                    this.user.roleIdList.splice(index,1)
                    this.rolesMap[roleId.toString()].selected = false;
                }
            },
            selectRole:function (roleId) {
                if (this.rolesMap[roleId.toString()].selected){
                    this.addRole(roleId.toString())
                }else{
                    this.removeRole(roleId.toString())
                }
            }
        },
        components:{
            'image-upload':ImageUpload
        },
        mounted:function () {
            const _this = this;
            //获取所有的zlass
            zlassApi.findAll()
                .then(function (data) {
                    _this.zlasses = data
                })

            //获取所有的role
            roleApi.findAll()
                .then(function (data) {
                    data.forEach(function (role) {
                        role.selected = false;
                        _this.$set(_this.rolesMap,role.id.toString(),role)
                    })
                    console.log(_this.rolesMap)

                })

            //获取该username用户信息
            userApi.findByUsername(_this.username)
                .then(function (data) {
                    if (data.username){
                        _this.user = data
                        //所有值用string替代
                        _this.user.status = _this.user.status.toString();
                        _this.user.type = _this.user.type.toString();
                        _this.user.gender = _this.user.gender.toString();
                        _this.user.roleIdList = _this.user.roleIdList.map(function (id) {
                            return id.toString()
                        })
                        //选中该用户拥有的角色
                        _this.user.roleIdList.forEach(function (id) {
                            _this.rolesMap[id.toString()].selected = true;
                        })
                    }
                }).catch(function () {
                    Message.error('初始化编辑失败')
                })
        }
    }
</script>

<style scoped>
    .el-radio{
        width: 90px;
    }
    .role-tag{
        margin-left: 10px;
    }
</style>
